<template>
	<div class="sw_system_container">
		<div class="sw_query_form" v-if="$isHasAuth(topButton)">
			<div class="button" v-hasPermi="'ad6060a5909741bea8c83537bbf9bdf9'">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</div>
			<el-form size="small" inline v-hasPermi="'0fcc00fe591b4c64affc4fb3fd491b54'">
				<el-form-item>
					<el-input v-model="queryData.ask" clearable placeholder="问题标题" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.isShow" clearable placeholder="是否展示" style="width: 100px">
						<el-option label="是" value="1"></el-option>
						<el-option label="否" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="sw_table_container" v-loading="loading">
			<el-table size="medium" :data="tableData" stripe height="100%" class="index_table_wrapper">
				<el-table-column type="index" label="序号" width="54" align="center"></el-table-column>
				<el-table-column prop="ask" label="问题标题" min-width="360">
					<template slot-scope="{ row }">
						<template v-if="!$isHasAuth(['b8263b8735f34c25a2502972fba9aa28'])">{{ row.ask }}</template>
						<router-link class="link" v-else :to="{ path: `/commonQuestion/${row.id}` }">{{ row.ask }}</router-link>
					</template>
				</el-table-column>
				<el-table-column prop="isShow" label="是否显示" min-width="80" align="center">
					<template slot-scope="{ row }">
						<template v-if="row.isShow === '1'">
							<el-tag type="success">是</el-tag>
						</template>
						<template v-else>
							<el-tag type="danger">否</el-tag>
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" min-width="100"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="100" v-if="$isHasAuth(tableButton)">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" v-hasPermi="'3f3c3497faf94305b7592c9a4a43ecb1'" @click="handleOpenDialog(row)">修改</el-button>
						<el-button size="medium" type="text" v-hasPermi="'21a13aec967d4eb9881b09f5fdab952d'" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template v-if="dataCount > 0">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
		</template>
		<data-detail v-model="detailDialog" :data="detailData" @refresh="queryTableData"></data-detail>
	</div>
</template>

<script>
import dataDetail from './form';
import { getTbQaList, batchDeleteTbQa } from '@/api/system/tbQa';
export default {
	components: { dataDetail },
	data() {
		return {
			loading: false,
			queryData: {
				page: 1,
				limit: 15
			},
			dataCount: 0,
			tableData: [],
			detailData: {},
			detailDialog: false
		};
	},
	computed: {
		topButton() {
			return ['0fcc00fe591b4c64affc4fb3fd491b54', 'ad6060a5909741bea8c83537bbf9bdf9'];
		},
		tableButton() {
			return ['3f3c3497faf94305b7592c9a4a43ecb1', '21a13aec967d4eb9881b09f5fdab952d'];
		}
	},
	mounted() {
		this.queryTableData();
	},
	methods: {
		//获取表格数据
		async getTabelData() {
			let params = { ...this.queryData };
			let result = await getTbQaList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = !result.data ? [] : result.data;
				this.dataCount = parseInt(result.count);
				this.tableData = datas;
			}
		},

		//查询表格数据
		queryTableData() {
			this.loading = true;
			this.getTabelData();
		},

		//删除数据
		handleDeleteData(row) {
			let that = this;
			that.$confirm(`此操作将删除反馈数据, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(row);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除数据请求
		async deleteDataRequest(row) {
			let result = await batchDeleteTbQa([row.id]).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.$showCustomMessage('success', `删除成功`);
			}
		},

		handleOpenDialog(data) {
			this.detailData = !data ? {} : { ...data };
			this.detailDialog = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.faq {
	&:deep(.sw_query_form) {
		margin-bottom: 0;
	}
}
</style>
